<template>
  <div class="ProductEdit">
    <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="产品名称" required>
        <el-input v-model="inputObj.productName" />
      </el-form-item>
      <el-form-item label="产品编号" required>
        <el-input v-model="inputObj.id" />
      </el-form-item>
      <el-form-item label="登录页文字" required>
        <el-input v-model="inputObj.loginPageName" />
      </el-form-item>
      <el-form-item label="登录页logo" required>
        <el-input v-model="inputObj.logo" />
      </el-form-item>
      <el-form-item label="首页logo" required>
        <el-input v-model="inputObj.portalLogo" />
      </el-form-item>
      <el-form-item v-if="Object.keys(resObj).length > 0" label="租户配置" required>
        <el-select v-model="selectValue" style="width: 100%;" collapse-tags multiple placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="字体">
        <el-input v-model="inputObj.color" type="color" style="width:40px;" @input="$forceUpdate()" />
      </el-form-item>
      <el-form-item label="背景">
        <el-input v-model="inputObj.background" type="color" style="width:40px;" @input="$forceUpdate()" />
      </el-form-item>
      <el-form-item label="边框">
        <el-input v-model="inputObj.border" type="color" style="width:40px;" @input="$forceUpdate()" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { tenantList, tenantChooseList, tenantSave } from '@/api/admin/product'
export default {
  name: 'ProductEdit',

  props: {
    resObj: {
      type: Object,
      default: () => {}
    },
    id: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      inputObj: { },

      selectValue: [],
      options: []
    }
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      this.setData()
      this.settenant()
    },

    // 初始化inputObj数据
    setData() {
      if (Object.keys(this.resObj).length > 0) {
        this.inputObj = JSON.parse(JSON.stringify(this.resObj.data))

        const theme = JSON.parse(this.resObj.data.theme)
        this.inputObj.color = theme['color']
        this.inputObj.background = theme['background-color']
        this.inputObj.border = theme['border-color']
      } else {
        this.inputObj = {
          h3SystemId: '',
          id: '',
          loginPageName: '',
          logo: '',
          portalLogo: '',
          productCode: '',
          productName: '',
          productUrl: '',
          color: '',
          background: '',
          border: ''
        }
      }
    },

    settenant() {
      if (Object.keys(this.resObj).length > 0) {
        tenantList().then(res => {
          if (res.data.code === 0) {
            const data = res.data.data
            this.options = []
            this.selectValue = []

            data.forEach(item => {
              this.options.push({
                value: item.id,
                label: item.name
              })
            })
          }
        })

        tenantChooseList(this.id).then(res => {
          if (res.data.code === 0 && res.data.data.length > 0) {
            const list = res.data.data
            this.selectValue = []
            list.forEach(item => {
              this.selectValue.push(item.tenantId)
            })
          }
        })
      }
    },

    updateTenant() {
      if (this.selectValue.length > 0) {
        let tenderId = ''
        this.selectValue.forEach(item => {
          tenderId += `&tenderId=${item}`
        })

        tenderId = tenderId.replace('&tenderId=', '')

        tenantSave(this.id, tenderId).then(res => {
          return true
        })
      }
    }
  }
}
</script>

<style lang='less'>
.ProductEdit{
  width: 60%;

  input[type='color']{
    padding: 0;
  }
}
</style>